<template>
  <div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="block">
          <svg class="icon" aria-hidden="true" @click.stop="show = false">
            <icon class="icon" name="rward-dlg-close" scale="2" />
          </svg>
          <img class="main-img" v-show="!isOpen" src="@/assets/images/redbag-close.png" @click="getReward"/>
          <img class="main-img" v-show="isOpen" src="@/assets/images/redbag-open.png" @click="show = false" />
          <div class="num" v-show="isOpen">
            {{integration}}
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { getClientId } from "@/utils/util";
import { Overlay ,Toast} from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      show: false,
      isOpen: false,
      integration: 0
    };
  },
  components: {
    [Overlay.name]: Overlay
  },
  computed: {
    ...mapState("user", {
      rewardDialogShow: state => state.rewardDialogShow
    })
  },
  watch: {
    rewardDialogShow(newValue) {
      this.show = newValue
    }
  },
  methods: {
    getReward() {
      this.$http
        .post("/integration/getIntegration", {
          clientId: getClientId()
        })
        .then(res => {
          if (res.info) {
            this.integration = res.info.integration || 0
            this.isOpen = true
          }
        })
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  position: relative;
  width: 348px;
  height: 437px;
}
.main-img {
  width: 348px;
  height: 437px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}
.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.num{
  font-size: 64px;
  color: #FE472D;
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

